<template>
  <div class="mb-10px">
    <div class="font-size-16px font-600">{{ many.label }}</div>
    <el-table :data="data" highlight-current-row>
      <el-table-column v-for="(column, i) in many.columns" :label="column.label" :key="i">
        <template #default="{ row }">
          {{ row[camelCase(column.name)] }}
        </template>
      </el-table-column>
      <el-table-column v-if="Object.keys(crosses).length > 0" label="操作" width="100px">
        <template #default="{ row }">
          <el-button v-for="(item, cross) in crosses" :key="cross" @click="showData(row[cross], item)">
            {{ item.label }}({{ item.type == 'hasMany' ? row[cross]?.length : (row[cross] ? 1 : 0) }})
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
  import { ElTable, ElTableColumn, ElButton } from 'element-plus'
  import { Cross } from '@/seed-application/types'
  import { popup } from '@/components/Popup'
  import { h } from 'vue'
  import DetailList from './DetailList.vue'
  import Detail from './Detail.vue'
  import { camelCase } from 'lodash-es'

  const props = defineProps<{many: Cross, data: any[]}>()
  const many = props.many
  const data = props.data
  const crosses = many.crosses

  const showData = (data: any, cross: Cross) => {
    popup({ title: cross.label }, {
      default: () => {
        if(cross.type == 'hasMany' || cross.type == 'habtm') return h(DetailList, {many: cross, data})
        return h(Detail, {one: cross, data})
      }
    })
  }
</script>